<template>
  <div>
    <h5 class="student_title">学员管理</h5>
    <el-table :data="tableData" border stripe>
      <el-table-column prop="checkbox" label="复选框">
        <input type="checkbox" />
      </el-table-column>
      <el-table-column prop="nickname" label="姓名">
        <!-- <img :src="checkbox[0].avatar" alt=""> -->
      </el-table-column>
      <el-table-column prop="mobile" label="手机号"></el-table-column>
      <el-table-column prop="zhuangtai" label="状态"></el-table-column>
      <el-table-column prop="date" label="日期"></el-table-column>
      <el-table-column prop="address" label="操作">
          <button>删除</button>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      tableData: [] //全部数据
    };
  },
  mounted() {
    axios
      .get("./tableData.json")
      .then(res => {
        res.data.forEach(element => {
          var date = new Date(parseInt(element.created_at) * 1000);
          // console.log(date);
          // 更改时间
          element.date = `${date.getFullYear()}年${date.getMonth() +
            1}月${date.getDay()}日`;
          // 更改状态
          element.zhuangtai = element.status === 0 ? "禁用" : "启用";
        });
        this.tableData = res.data;
        console.log(res.data);
      })
      .catch(err => {
        console.log(err);
      });
  }
};
</script>

<style  scoped>
.student_title {
  border-bottom: 1px solid black;
}
/deep/ .checkbox {
  padding-left: 40px;
}
</style>